<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

<head>
	<meta charset="UTF-8">
	<title>MakeCode Maker - Blocks / Javascript editor - MakeCode Maker (Cortex class)</title>
	<meta name="Description" content="A Blocks / JavaScript code editor for MakeCode Maker Boards" />

	
<!-- include meta.html -->
<!-- This file is typically overriden by the target, with own Twitter
     account etc. Most data is taken from the theme file though.  
  -->

<!-- include robotsmeta.html -->

<!-- end include robotsmeta.html -->

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@msmakecode" />
<meta name="twitter:title" content="MakeCode Maker - Blocks / Javascript editor - MakeCode Maker (Cortex class)" />
<meta name="twitter:description" content="A Blocks / JavaScript code editor for MakeCode Maker Boards" />
<meta name="twitter:image" content="" />

<meta property="og:title" content="MakeCode Maker - Blocks / Javascript editor - MakeCode Maker (Cortex class)" />
<meta property="og:site_name" content="Microsoft MakeCode" />
<meta property="og:type" content="website" />
<meta property="og:description" content="A Blocks / JavaScript code editor for MakeCode Maker Boards" />
<meta property="fb:app_id" content="" />
<meta property="og:image" content="" />

<meta name="format-detection" content="telephone=no">
<link rel="apple-touch-icon" href="">
<link rel="icon" type="image/png" href="">
<link rel="shortcut icon" href="">
<meta name="theme-color" content="#ecf0f1">

<!-- end include meta.html -->

	
<!-- include head.html -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

<link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/semantic.css" />
<link id="blocklycss"  data-rtl="/blb/rtlblockly.css" rel="stylesheet" href="/blockly.css" />
<link rel="stylesheet" href="/docfiles/style.css" />
<link rel="stylesheet" href="/docfiles/vs.css" />
<link rel="stylesheet" href="/docfiles/target.css" />

<script src="/jquery.js"></script>

<script src="/embed.js" type="text/javascript"></script>
<script src="/docfiles/docs.js" type="text/javascript"></script>
<script src="/docfiles/target.js" type="text/javascript"></script>

<style>
    
.ui.accent { color: #ecf0f1; }
.ui.inverted.accent { background: #ecf0f1; }

</style>

<!-- end include head.html -->


</head>

<body id='root' class='root'>

	<div id="accessibleMenu" class="ui accessibleMenu borderless fixed menu" role="menubar">
		
            <a href="#maincontent" class="ui item link" tabindex="0" role="menuitem">Skip to main content</a>
        
	</div>


	
<!-- include tocheader.html -->
<div class="ui vertical accent lighttoc sidebar menu left hideprint">
    <div class="item">
        <a href="/docs/.html" class="header focused" tabindex="0" title="Go to editor">
            <img aria-hidden="true" role="presentation" class="ui mini image" src="docs/static/logo.svg" />
        </a>
        Documentation
    </div>
    <div class="item search">
        <form id="tocsearch1" role="form" method="get" action="https://www.bing.com/search">
            <div class="ui fluid icon input">
                <input type="hidden" name="q1" value="site:https://maker.makecode.com/" />
                
                <input type="search" name="q" placeholder="Search..." aria-label="Search Documentation">
                <i onclick="document.getElementById('tocsearch1').submit();" tabindex="0" class="search link icon" aria-label="Search" role="button"></i>
            
            </div>
        </form>
    </div>
    <!-- TOC Menu -->
    <div class="menuContainer">
        
    <a class="item " href="/docs/about.html" role="menuitem">About</a>


    <a class="item " href="/docs/faq.html" role="menuitem">FAQ</a>


    <div class="item" title="">
        <a class="header " href="/docs/reference.html" role="menu">Reference</a>
        <div class="menu">
            
    <a class="item " href="/docs/reference/music.html" role="menuitem">music</a>


    <a class="item " href="/docs/reference/pins.html" role="menuitem">pins</a>


    <a class="item " href="/docs/reference/control.html" role="menuitem">control</a>


    <a class="item " href="/docs/reference/serial.html" role="menuitem">serial</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/blocks.html" role="menu">Blocks</a>
        <div class="menu">
            
    <a class="item " href="/docs/blocks/on-start.html" role="menuitem">On Start</a>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/loops.html">Loops</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/loops/repeat.html" role="menuitem">repeat</a>


    <a class="item " href="/docs/blocks/loops/for.html" role="menuitem">for</a>


    <a class="item " href="/docs/blocks/loops/while.html" role="menuitem">while</a>

        </div>
    </div>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/logic.html">Logic</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/logic/if.html" role="menuitem">if</a>


    <a class="item " href="/docs/blocks/logic/boolean.html" role="menuitem">Boolean</a>

        </div>
    </div>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/variables.html">Variables</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/variables/assign.html" role="menuitem">assign</a>


    <a class="item " href="/docs/blocks/variables/change.html" role="menuitem">change var</a>


    <a class="item " href="/docs/blocks/variables/var.html" role="menuitem">var</a>

        </div>
    </div>


    <a class="item " href="/docs/blocks/math.html" role="menuitem">Math</a>


    <a class="item " href="/docs/blocks/javascript-blocks.html" role="menuitem">JavaScript blocks</a>


    <a class="item " href="/docs/blocks/custom.html" role="menuitem">Custom blocks</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/javascript.html" role="menu">JavaScript</a>
        <div class="menu">
            
    <a class="item " href="/docs/javascript/call.html" role="menuitem">Calling</a>


    <a class="item " href="/docs/javascript/sequence.html" role="menuitem">Sequencing</a>


    <a class="item " href="/docs/javascript/variables.html" role="menuitem">Variables</a>


    <a class="item " href="/docs/javascript/operators.html" role="menuitem">Operators</a>


    <a class="item " href="/docs/javascript/statements.html" role="menuitem">Statements</a>


    <a class="item " href="/docs/javascript/functions.html" role="menuitem">Functions</a>


    <a class="item " href="/docs/javascript/types.html" role="menuitem">Types</a>


    <a class="item " href="/docs/javascript/classes.html" role="menuitem">Classes</a>


    <a class="item " href="/docs/javascript/interfaces.html" role="menuitem">Interfaces</a>


    <a class="item " href="/docs/javascript/generics.html" role="menuitem">Generics</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/types.html" role="menu">Types</a>
        <div class="menu">
            
    <a class="item " href="/docs/types/number.html" role="menuitem">Number</a>


    <a class="item " href="/docs/types/string.html" role="menuitem">String</a>


    <a class="item " href="/docs/types/boolean.html" role="menuitem">Boolean</a>


    <a class="item " href="/docs/types/array.html" role="menuitem">Array</a>


    <a class="item " href="/docs/types/function.html" role="menuitem">Function</a>

        </div>
    </div>



    </div>
</div>

<div class="ui fixed accent borderless lighttoc main menu hideprint">
  <div class="ui container">
    
            <a id="togglesidebar" class="launch icon item" tabindex="0" title="Side menu" aria-label="Side menu" role="menu" aria-expanded="false">
                <i class="content icon"></i>
            </a>
        

    <div class="item">
        
    </div>
    
    <div class="right menu">
        <a href="/docs/.html" class="header item" tabindex="0" title="Go to editor">
            <img aria-hidden="true" role="presentation" class="ui mini image" src="docs/static/logo.svg" />
        </a>
    </div>
  </div>
</div>
<!-- end include tocheader.html -->


	<div id="docs" class="pusher">

		
<!-- include toc.html -->
<div class="toc ui accent lighttoc hideprint">
    <div class="ui vertical accent lighttoc sticky menu tocmenu">
        <div class="item">
            <a href="/docs/.html" class="header focused" tabindex="0" title="Go to editor">
                <img aria-hidden="true" role="presentation" class="ui mini image" src="docs/static/logo.svg" />
            </a>
            Documentation
        </div>
        <div class="item search">
            <form id="tocsearch2" role="form" method="get" target="_blank" action="https://www.bing.com/search">
                <div class="ui fluid icon input">
                    <input type="hidden" name="q1" value="site:https://maker.makecode.com/" />
                    
                <input type="search" name="q" placeholder="Search..." aria-label="Search Documentation">
                <i onclick="document.getElementById('tocsearch2').submit();" tabindex="0" class="search link icon" aria-label="Search" role="button"></i>
            
                </div>
            </form>
        </div>
        <!-- TOC Menu -->
        <div class="menuContainer">
            
    <a class="item " href="/docs/about.html" role="menuitem">About</a>


    <a class="item " href="/docs/faq.html" role="menuitem">FAQ</a>


    <div class="item" title="">
        <a class="header " href="/docs/reference.html" role="menu">Reference</a>
        <div class="menu">
            
    <a class="item " href="/docs/reference/music.html" role="menuitem">music</a>


    <a class="item " href="/docs/reference/pins.html" role="menuitem">pins</a>


    <a class="item " href="/docs/reference/control.html" role="menuitem">control</a>


    <a class="item " href="/docs/reference/serial.html" role="menuitem">serial</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/blocks.html" role="menu">Blocks</a>
        <div class="menu">
            
    <a class="item " href="/docs/blocks/on-start.html" role="menuitem">On Start</a>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/loops.html">Loops</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/loops/repeat.html" role="menuitem">repeat</a>


    <a class="item " href="/docs/blocks/loops/for.html" role="menuitem">for</a>


    <a class="item " href="/docs/blocks/loops/while.html" role="menuitem">while</a>

        </div>
    </div>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/logic.html">Logic</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/logic/if.html" role="menuitem">if</a>


    <a class="item " href="/docs/blocks/logic/boolean.html" role="menuitem">Boolean</a>

        </div>
    </div>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/variables.html">Variables</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/variables/assign.html" role="menuitem">assign</a>


    <a class="item " href="/docs/blocks/variables/change.html" role="menuitem">change var</a>


    <a class="item " href="/docs/blocks/variables/var.html" role="menuitem">var</a>

        </div>
    </div>


    <a class="item " href="/docs/blocks/math.html" role="menuitem">Math</a>


    <a class="item " href="/docs/blocks/javascript-blocks.html" role="menuitem">JavaScript blocks</a>


    <a class="item " href="/docs/blocks/custom.html" role="menuitem">Custom blocks</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/javascript.html" role="menu">JavaScript</a>
        <div class="menu">
            
    <a class="item " href="/docs/javascript/call.html" role="menuitem">Calling</a>


    <a class="item " href="/docs/javascript/sequence.html" role="menuitem">Sequencing</a>


    <a class="item " href="/docs/javascript/variables.html" role="menuitem">Variables</a>


    <a class="item " href="/docs/javascript/operators.html" role="menuitem">Operators</a>


    <a class="item " href="/docs/javascript/statements.html" role="menuitem">Statements</a>


    <a class="item " href="/docs/javascript/functions.html" role="menuitem">Functions</a>


    <a class="item " href="/docs/javascript/types.html" role="menuitem">Types</a>


    <a class="item " href="/docs/javascript/classes.html" role="menuitem">Classes</a>


    <a class="item " href="/docs/javascript/interfaces.html" role="menuitem">Interfaces</a>


    <a class="item " href="/docs/javascript/generics.html" role="menuitem">Generics</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/types.html" role="menu">Types</a>
        <div class="menu">
            
    <a class="item " href="/docs/types/number.html" role="menuitem">Number</a>


    <a class="item " href="/docs/types/string.html" role="menuitem">String</a>


    <a class="item " href="/docs/types/boolean.html" role="menuitem">Boolean</a>


    <a class="item " href="/docs/types/array.html" role="menuitem">Array</a>


    <a class="item " href="/docs/types/function.html" role="menuitem">Function</a>

        </div>
    </div>



        </div>
    </div>
</div>
<!-- end include toc.html -->


		<div class="article" id="maincontent">
			<div class="article-inner">

				
<!-- include header.html -->
<div class="ui one column padded grid hideprint hidemobile">
    <div class="column">
        
    </div>
</div>

<!-- end include header.html -->


				<div class="main ui container fluid mainbody">
					
            <button id="printbtn" class="circular ui icon right floated button hideprint" title="Print this page">
                <i class="icon print"></i>
            </button>
         
    <div class="ui text">
        <h1 id="blocks-embed">Blocks embed</h1><p>MakeCode provides a lightweight blocks rendering engine that renders code snippets into SVG images. </p>
<h2 id="the-curse-of-screenshots">The Curse of screenshots</h2><p>Unlike text based programming languages, block based snippets aren’t be easily rendered in a documentation page.
A quick solution is take screenshots of the snippets but that approach can quickly become unsustainable:</p>
<ul>
<li>screenshots don’t compile - so it’s hard to maintain then</li>
<li>screenshots aren’t localizable - non-English speaking users won’t be able to read the blocks</li>
<li>screenshots can’t reload easily into the editor</li>
<li>screenshots don’t play well with source control system - you can’t diff changes efficiently.</li>
</ul>
<h2 id="rendering-blocks-on-the-spot">Rendering blocks on the spot</h2><p>The MakeCode approach to solving this issue is to render the <strong>JavaScript</strong> code snippets on the client using the same block rendering engine as the editor. Under the hood, an <code>iframe</code> from the MakeCode editor will render the blocks for you.</p>
<h2 id="plugins">Plugins</h2><p>Here are some integration samples for various documentation/blogging engines.</p>
<ul>
<li><a target="_blank" rel="nofollow noopener" href="https://plugins.gitbook.com/plugin/pxt">GitBook plugin</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://microsoft.github.io/pxt-mkdocs-sample/">MkDocs plugin</a></li>
</ul>
<h2 id="custom-rendering">Custom rendering</h2><p>To render blocks in your own HTML documents or to make plugins for a document platform (such as a CMS or blogging engine), a custom implementation is needed. You can use the MakeCode blocks rendering engine to render blocks for code snippets in your own documents.</p>

    <div class="ui info message">
        <div class="content">
            <p>Try this <a target="_blank" rel="nofollow noopener" href="https://jsfiddle.net/ndyz1d57/80/">fiddle</a> to see an embedded blocks rendering example.</p>

        </div>
    </div>
<p>An outer document contains the code snippets to render. This document hosts a hidden <code>iframe</code> which has the rendering engine attached to it. Messages are sent between the outer document and the renderer to sequence the code snippet rendering process.</p>
<h3 id="rendering-message-sequence">Rendering message sequence</h3><h4 id="render-ready-response-message">Render Ready Response message</h4><p>A message handler is registered to communicate with the rendering <code>iframe</code>. The renderer sends a <code>renderready</code> message to this handler when it has loaded and is ready to receive messages. The message handler can now get the code snippets in the document and begin sending them to the <code>iframe</code>.</p>
<p>The <code>renderready</code> response has this message format:</p>
<pre><code class="lang-typescript-ignore">export interface RenderReadyResponseMessage extends SimulatorMessage {
    source: &quot;makecode&quot;,
    type: &quot;renderready&quot;
}</code></pre>
<h4 id="render-blocks-request-message">Render Blocks Request message</h4><p>The outer document passes each snippet element it wants to render to the renderer in a <code>renderblocks</code> request message. This message is posted to the <code>iframe</code> content window.</p>
<p>The <code>renderblocks</code> request has this message format:</p>
<pre><code class="lang-typescript-ignore">export interface RenderBlocksRequestMessage extends SimulatorMessage {
    type: &quot;renderblocks&quot;,
    id: string;
    code: string;
    options?: {
        package?: string;
        snippetMode?: boolean;
    }
}</code></pre>
<ul>
<li><code>id</code>: The identifer of the snippet element. This is used to match the document element of the snippet with the rendered blocks returned later.</li>
<li><code>code</code>: The text of the code snippet to send, compile, and render.</li>
</ul>
<h4 id="render-blocks-response-message">Render Blocks Response message</h4><p>The renderer sends back a <code>renderblocks</code> response after it has transformed the code into a block image. The block image is returned in two forms: as a SVG element and as an image data source.</p>
<p>The <code>renderblocks</code> response has this message format:</p>
<pre><code class="lang-typescript-ignore">export interface RenderBlocksResponseMessage extends SimulatorMessage {
    source: &quot;makecode&quot;,
    type: &quot;renderblocks&quot;,
    id: string;
    svg?: string;
    uri?: string;
    width?: number;
    height?: number;
}</code></pre>
<ul>
<li><code>id</code>: The identifer of the snippet element. This is used to replace the document element of the snippet with the rendered blocks or to associate the rendered blocks if the snippet is to be retained in the document.</li>
<li><code>svg</code>: The SVG image element.</li>
<li><code>uri</code>: The data source of the blocks image.</li>
<li><code>width</code>: The width of the SVG blocks image.</li>
<li><code>height</code>: The height of the SVG blocks image.</li>
</ul>
<h3 id="message-handler">Message Handler</h3><p>To receive messages from the renderer, the document registers a handler using the DOM <a target="_blank" rel="nofollow noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a> method. This is registered for the <code>message</code> event. The two responses it waits for are <code>renderready</code> and <code>renderblocks</code>. The message contents are in the format described above.</p>
<p>The handler must check that the <code>source</code> value in the message contains <code>&quot;makecode&quot;</code> to be certain that this message came from the blocks renderer.</p>
<h4 id="responding-to-renderready">Responding to <code>renderready</code></h4><p>When the <code>renderready</code> response is received, the document can begin collecting and sending its code snippets to the renderer. A method for gathering snippet code and sending it to the renderer is shown in the <a  rel="nofollow noopener" href="/docs/blocks-embed#makecoderenderpre.html">makeCodeRenderPre</a> function.</p>
<h4 id="responding-to-renderblocks">Responding to <code>renderblocks</code></h4><p>The <code>renderblocks</code> message is received as a response to a previous <code>renderblocks</code> request sent by the document. The message contains an image of the rendered blocks if compilation of the code snippet sent was successful. The image can be inserted into the DOM by matching the <code>id</code> of the original snippet element with the <code>id</code> in the message. The image is provided as both SVG and <code>img</code> data. The implementation can decide which form it wants to use. Depending on how the blocks are to be displayed, the original snippet elements are replaced by the blocks image or the blocks are added to the DOM next to them.</p>
<h4 id="handler-example">Handler example</h4><p>As an example, let’s say that a document has all of its code snippets contained in <code>pre</code> elements:</p>
<pre><code>&lt;pre&gt;
basic.showString(&quot;Hello World&quot;)
&lt;/pre&gt;</code></pre><p>A message handler is registered for <code>message</code> events. For the <code>renderready</code> message, all the snippets are collected and given a ‘snippet-x’ identifier. Each snippet is passed to <a  rel="nofollow noopener" href="/docs/blocks-embed#makecoderenderpre.html">makeCodeRenderPre</a> to get a block image for it. When the block image is returned in the <code>renderblocks</code> message, the message identifier is matched to a <code>pre</code> tag and the element is replaced by an <code>img</code> element containing the block image data.</p>
<p>This example uses standard DOM methods but feel free to write it using your favorite JS framework.</p>
<pre><code class="lang-typescript-ignore">window.addEventListener(&quot;message&quot;, function (ev) {
    var msg = ev.data;
    if (msg.source != &quot;makecode&quot;) return;

    switch (msg.type) {
        case &quot;renderready&quot;:
            var snippets = document.getElementsByTagName(&quot;pre&quot;)
            for (var i = 0; i&lt; snippets.length; i++) {
                snippets[i].id = &quot;snippet-&quot; + i;
                makeCodeRenderPre(snippets[i]);
            }
            break;
        case &quot;renderblocks&quot;:
            var svg = msg.svg; // this is a string containing SVG
            var id = msg.id;   // this is the id you sent
            // replace text with svg
            var img = document.createElement(&quot;img&quot;);
            img.src = msg.uri;
            img.width = msg.width;
            img.height = msg.height;
            var snippet = document.getElementById(id)
            snippet.parentNode.insertBefore(img, snippet)
            snippet.parentNode.removeChild(snippet);
            break;
    }
}, false);</code></pre>
<h3 id="makecoderenderpre">Sending snippets to the renderer </h3><p>To request a code render, a <code>renderblocks</code> message is sent to the rendering <code>iframe</code>. First, the request message is prepared with the matching element identifier set in the message <code>id</code>. Then, the code snippet text is taken from the inner part of its containing element and set as the <code>data</code> value of the message. The message is posted to the <code>iframe</code>.</p>
<pre><code class="lang-typescript-ignore">function makeCodeRenderPre(pre) {
    var f = document.getElementById(&quot;makecoderenderer&quot;);
    f.contentWindow.postMessage({
        type: &quot;renderblocks&quot;,
        id: pre.id,
        code: pre.innerText
    }, &quot;https://maker.makecode.com/&quot;);
}</code></pre>
<h3 id="create-the-iframe-renderer">Create the <code>iframe</code> renderer</h3><p>Finally, the rendering <code>iframe</code> is added to the HTML DOM and is hidden so that it does not interfere with the outer document page.</p>
<pre><code class="lang-typescript-ignore">function makeCodeInjectRenderer() {
    var f = document.createElement(&quot;iframe&quot;);
    f.id = &quot;makecoderenderer&quot;;
    f.style.position = &quot;absolute&quot;;
    f.style.left = 0;
    f.style.bottom = 0;
    f.style.width = &quot;1px&quot;;
    f.style.height = &quot;1px&quot;;            
    f.src = &quot;https://maker.makecode.com/--docs?render=1&quot;
    document.body.appendChild(f);
}

// load the renderer
makeCodeInjectRenderer();</code></pre>
<p>Once this <code>iframe</code> loads, it sends the <code>renderready</code> message to the registered handler.</p>
<h3 id="example">Putting it together </h3><p>This HTML document example contains three <code>pre</code> elements with code snippets. Only two are sent to the renderer since they’re filtered on their class as <code>blocks</code>. Each element sent is given an identifier to match up with the rendered block that is returned. JQuery is used in this example but another framework or standard DOM methods could be used too.</p>
<pre><code>&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;title&gt;Blocks Embedding Test Page&lt;/title&gt;
    &lt;script src=&quot;https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js&quot;&gt;&lt;/script&gt;
    &lt;style&gt;
        html {font-family: Arial, Helvetica, sans-serif}
        .boxdiv {padding:5px; display:inline-block; border: solid; background-color: lightgray}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;Blocks Embedding Test Page&lt;/h1&gt;

&lt;h2&gt;Try embedding some blocks...&lt;/h2&gt;

&lt;p&gt;Render &lt;b&gt;basic.showString():&lt;/b&gt;&lt;/p&gt;

&lt;div class=&quot;boxdiv&quot;&gt;
    &lt;pre class=&quot;blocks&quot;&gt;&lt;code&gt;
basic.showString(&quot;Hello World&quot;)
    &lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;Render the Fibonacci example:&lt;/b&gt;&lt;/p&gt;

&lt;div class=&quot;boxdiv&quot;&gt;
    &lt;pre class=&quot;blocks&quot;&gt;&lt;code&gt;
let f1 = 0
let f2 = 0
let fibo = 0
fibo = 1
for (let i = 0; i &lt; 10; i++) {
    basic.showNumber(fibo)
    basic.pause(1000)
    f2 = f1
    f1 = fibo
    fibo = f1 + f2
}
    &lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;The Fibonacci example not rendered:&lt;/p&gt;

&lt;div class=&quot;boxdiv&quot;&gt;
    &lt;pre&gt;&lt;code&gt;
let f1 = 0
let f2 = 0
let fibo = 0
fibo = 1
for (let i = 0; i &lt; 10; i++) {
    basic.showNumber(fibo)
    basic.pause(1000)
    f2 = f1
    f1 = fibo
    fibo = f1 + f2
}
    &lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;script&gt;
var makecodeUrl = &quot;https://maker.makecode.com/&quot;;
var blocksClass = &quot;blocks&quot;;

var injectRenderer = function () {
    var f = $(&quot;&lt;iframe&gt;&quot;, {
        id: &quot;makecoderenderer&quot;,
        src: makecodeUrl + &quot;--docs?render=1&amp;lang=&quot; + ($(&#39;html&#39;).attr(&#39;lang&#39;) || &quot;en&quot;)
    });
    f.css(&quot;position&quot;, &quot;absolute&quot;);
    f.css(&quot;left&quot;, 0);
    f.css(&quot;bottom&quot;, 0);
    f.css(&quot;width&quot;, &quot;1px&quot;);
    f.css(&quot;height&quot;, &quot;1px&quot;);
    $(&#39;body&#39;).append(f);
}

function makeCodeRenderPre(pre) {
    var f = document.getElementById(&quot;makecoderenderer&quot;);
    f.contentWindow.postMessage({
        type: &quot;renderblocks&quot;,
        id: pre.id,
        code: pre.innerText
    }, &quot;https://maker.makecode.com/&quot;);
}

var attachBlocksListener = function () {
    var blockId = 0;
    window.addEventListener(&quot;message&quot;, function (ev) {
        var msg = ev.data;
        if (msg.source != &quot;makecode&quot;) return;

        switch (msg.type) {
            case &quot;renderready&quot;:
                $(&quot;.&quot; + blocksClass).each(function () {
                    var snippet = $(this)[0];
                    snippet.id = &quot;pxt-blocks-&quot; + (blockId++);
                    makeCodeRenderPre(snippet);
                });
                break;
            case &quot;renderblocks&quot;:
                var svg = msg.svg; // this is a string containing SVG
                var id = msg.id;   // this is the id you sent
                // replace text with svg
                var img = document.createElement(&quot;img&quot;);
                img.src = msg.uri;
                img.width = msg.width;
                img.height = msg.height;
                var pre = document.getElementById(id)
                pre.parentNode.insertBefore(img, pre)
                pre.parentNode.removeChild(pre);
                break;
        }
    }, false);
}

$(function () {
    injectRenderer();
    attachBlocksListener();
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><h2 id="laziness">Laziness</h2><p>You can detect whether you have any snippet on your page before loading the rendering iFrame.</p>

    </div>

					<div class="hideprint"></div>
				</div>

				
<!-- include footer.html -->
<footer class="ui vertical footer segment hideprint" aria-hidden="false">
    <div class="ui center aligned container">
        <div class="ui horizontal link list">
            <a class="item" href="https://twitter.com/intent/follow?screen_name=MsMakeCode" title="Follow us on Twitter" target="_blank"
                rel="noopener">
                <i class="huge icon twitter"></i>
            </a>
            <a class="item" href="https://www.instagram.com/makecode/" title="Follow us on Instagram" target="_blank" rel="noopened">
                <i class="huge icon instagram"></i>
            </a>
            <a class="item" href="https://www.youtube.com/channel/UCye7YlvFUUQ1dSy0WZZ1T_Q" title="Subscribe to our YouTube channel"
                target="_blank" rel="noopened">
                <i class="huge icon youtube"></i>
            </a>
            <a class="item" href="mailto:makecode@microsoft.com" title="Send us an Email" rel="noopened">
                <i class="huge icon mail"></i>
            </a>
        </div>
        <div class="ui section divider"></div>
        <div class="ui container horizontal small divided link list">
            <!-- <a class="item" href="https://makecode.com/contact" target="_blank" rel="noopener">Contact Us</a> -->
            <a class="item" href="https://makecode.com/privacy" target="_blank" rel="noopener">Privacy &amp; Cookies</a>
            <a class="item" href="https://makecode.com/termsofuse" target="_blank" rel="noopener"> Terms Of Use</a>
            <a class="item" href="https://makecode.com/trademarks" target="_blank" rel="noopener">Trademarks</a>
            <div class="item">© 2018 Microsoft</div>
        </div>
        <div class="ui container horizontal small divided link list">
            <a class="ui centered item" href="https://makecode.com/" title="Microsoft MakeCode" target="_blank" rel="noopener">Powered by Microsoft MakeCode</a>
        </div>
    </div>
</footer>

<!-- end include footer.html -->

			</div>

		</div>

	</div>


	
<!-- include macros.html -->
<!-- macro button -->

<!-- macro vimeo -->

<!-- macro youtube -->

<!-- macro section -->

<!-- macro hide -->

<!-- macro avatar -->

<!-- macro hint -->

<!-- wrapped around ordinary content -->
<!-- macro main-container -->

<!-- used for 'column' box - they are collected and wrapped in 'column-container' -->
<!-- macro column -->
<!-- macro column-container -->


<!-- Menu on the top of the page -->
<!-- macro item -->

<!-- macro divider -->

<!-- macro top-dropdown -->

<!-- macro inner-dropdown -->


<!-- TOC in the sidebar -->
<!-- macro item -->

<!-- macro divider -->

<!-- macro top-dropdown -->

<!-- macro top-dropdown-noheading -->

<!-- macro inner-dropdown -->

<!-- macro nested-dropdown -->

<!-- end include macros.html -->

	
<!-- include tracking.html -->
<script type="text/javascript" src="/pxtweb.js"></script>
<script type="text/javascript">
    window.loadAppInsights = function (includeCookie) {
        var appInsights=window.appInsights||function(config){
            function i(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s="AuthenticatedUserContext",h="start",c="stop",l="Track",a=l+"Event",v=l+"Page",y=u.createElement(o),r,f;y.src=config.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js";u.getElementsByTagName(o)[0].parentNode.appendChild(y);try{t.cookie=u.cookie}catch(p){}for(t.queue=[],t.version="1.0",r=["Event","Exception","Metric","PageView","Trace","Dependency"];r.length;)i("track"+r.pop());return i("set"+s),i("clear"+s),i(h+a),i(c+a),i(h+v),i(c+v),i("flush"),config.disableExceptionTracking||(r="onerror",i("_"+r),f=e[r],e[r]=function(config,i,u,e,o){var s=f&&f(config,i,u,e,o);return s!==!0&&t["_"+r](config,i,u,e,o),s}),t
        }({
            instrumentationKey:"9801ed01-c40f-46ec-aa40-2a1742a9e71c",
            disableAjaxTracking: true,
            overridePageViewDuration: false,
            disableExceptionTracking: true,
            isCookieUseDisabled: !includeCookie,
            isStorageUseDisabled: !includeCookie,
            url: "/ai.0.js"
        });
        window.appInsights=appInsights;
        appInsights.queue.push(function () {
            appInsights.context.addTelemetryInitializer(function (envelope) {
                if (typeof pxtConfig === "undefined") return;
                var telemetryItem = envelope.data.baseData;
                telemetryItem.properties = telemetryItem.properties || {};
                telemetryItem.properties["target"] = pxtConfig.targetId;
                telemetryItem.properties["stage"] = (pxtConfig.relprefix || "/--").replace(/[^a-z]/ig, '')
                telemetryItem.properties["cookie"] = includeCookie;
                if (typeof Windows !== "undefined")
                    telemetryItem.properties["WindowsApp"] = 1;
                var userAgent = navigator.userAgent.toLowerCase();
                var userAgentRegexResult = /\belectron\/(\d+\.\d+\.\d+.*?)(?: |$)/i.exec(userAgent); // Example navigator.userAgent: "Mozilla/5.0 Chrome/61.0.3163.100 Electron/2.0.0 Safari/537.36"
                if (userAgentRegexResult) {
                    telemetryItem.properties["Electron"] = 1;
                    telemetryItem.properties["ElectronVersion"] = userAgentRegexResult[1];
                }
                if (typeof pxtElectron !== "undefined") {
                    telemetryItem.properties["PxtElectron"] = 1;
                    telemetryItem.properties["ElectronVersion"] = pxtElectron.versions.electronVersion;
                    telemetryItem.properties["ChromiumVersion"] = pxtElectron.versions.chromiumVersion;
                    telemetryItem.properties["NodeVersion"] = pxtElectron.versions.nodeVersion;
                    telemetryItem.properties["PxtElectronVersion"] = pxtElectron.versions.pxtElectronVersion;
                    telemetryItem.properties["PxtCoreVersion"] = pxtElectron.versions.pxtCoreVersion;
                    telemetryItem.properties["PxtTargetVersion"] = pxtElectron.versions.pxtTargetVersion;
                    telemetryItem.properties["PxtElectronIsProd"] = pxtElectron.versions.isProd;
                }
            });
        });
        appInsights.trackPageView(null, scrubUrl(window.location.toString()), {urlReferrer: scrubUrl(document.referrer.toString())});

        //Scrub the key (if any) from the URL.
        function scrubUrl(url) {
            var scriptIdRegex = /(?:\d{5}-\d{5}-\d{5}-\d{5})|(?:_[0-9a-zA-Z]{12})/g;
            return url.replace(scriptIdRegex, "xxxxx-xxxxx-xxxxx-xxxxx");
        }
    }
    pxt.initAnalyticsAsync();
</script>
<!-- end include tracking.html -->


</body>

</html>